<template>
    <div class="page workApplyDetail-page" data-page="workApplyDetail" style="z-index: 2">
        <div class="link-page-nav">
            <a href="#" class="link" @click=$root.backToTab()> 
              <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top">
            <div class="link-page-title">作业申请详情</div>
            <a class="link popover-open" data-popover="#workApply_menu_{{getNewId}}" id="workApply_gengduo_{{getNewId}}" style="display:none;">
              <i class="iconfont icon-APPicon_gengduo" style="font-size: 22px"></i>
            </a>
            <a class="link" id="workApply_fuzhi_{{getNewId}}" @click="copyWorkApply">
              <i class="iconfont icon--0" style="font-size: 22px"></i>
            </a>
        </div>
        
        <div class="popover select-option-list" id="workApply_menu_{{getNewId}}" style="width: 160px;top: 60px;">
	      <div class="popover-angle"></div>
	      <div class="popover-inner">
	          <div class="list">
	            <ul>
	              <li style="text-align: center;"><a href="" style="line-height: 30px;" class="list-button item-link popover-close" @click="copyWorkApply">复制</a></li>
	              <li style="text-align: center;"><a href="" style="line-height: 30px;" class="list-button item-link popover-close"  @click="returnTask">撤回</a></li>
	            </ul>
	          </div>
	      </div>
	  </div>
	  
        <div class="page-content" style="padding-bottom: 120px">
          <div class="workApplyContent">
          	<div class="workApplyType" id="workTypeName_{{getNewId}}"></div>
          	<div class="workApplyName" id="workName_{{getNewId}}"></div>
          </div>
          <div class="content-panels" style="margin-top:0">
          	 <div class="turn-time">
              <span class="iteml">业主单位</span>
              <span class="itemr" id="workApplyOrgName_{{getNewId}}" style="width: 80%;"></span>
            </div>
          	 <div class="turn-time">
              <span class="iteml">开始时间</span>
              <span class="itemr" id="work_beginTime_{{getNewId}}" style="width: 80%;"></span>
            </div>
            <div class="turn-time">
              <span class="iteml">结束时间</span>
              <span class="itemr" id="work_endTime_{{getNewId}}" style="width: 80%;"></span>
            </div>
          </div>
          <div class="bottom-line"></div>
          
          <div class="content-panels" id="residualTask_{{getNewId}}">
            <p class="tt">作业区域</p>
            
          </div>
          <div class="bottom-line"></div>
          <div id="relationTaskPlan_{{getNewId}}" class="content-panels RelationPolice1 RelationPolice2" style="display:none;">
        	<span class="tt">相关任务</span>
        	<div class="list media-list">
	        <ul id="tastList_{{getNewId}}">

	        </ul>
	        </div>
      </div>
      
          <div class="content-panels" style="margin-top:60px">
            <div>
              <span class="tt">作业人</span>
              <div class="list" style="margin: 10px 0px;width: 100%">
                <ul id="ownerUser_{{getNewId}}">
					
                </ul>
            </div>
            </div> 
            <div style="display: inline-block; width: 100%;"></div>  
          </div>
          <div class="bottom-line"></div>
          
          <div class="content-panels">
            <p class="tt" style="margin-bottom:20px">审批流程</p>
            <div class="timeline timeline-top" id="timeLineList_{{getNewId}}" style="margin-left: -30px;">
				  
			</div>
          </div>
          <div id="work_applybtn_{{getNewId}}" style="display:none">
          	  <div class="approvalPassBtn" @click="submitWorkApply">审批</div>
          </div>
        </div>
    </div>
</template>
<script>
    return {
    	mounted() {
    		var self = this;
    		self.id = this.$route.params.taskId;
    		self.status = this.$route.params.status;
        },
        data: function () {
        	return {
        		approvalDetaiId:"",
            getNewId: (new Date()).getTime(),
        	}
        },
        methods: {
        	//获取作业申请任务详情
            getWorkApplyDetail:function(){
              var self = this;
            	$("#residualTask_"+self.getNewId).find("div").remove();
            	$("#tastList_"+self.getNewId).find("li").remove();
            	$("#timeLineList_"+self.getNewId).find("div").remove();
            	$("#ownerUser_"+self.getNewId).find("div").remove();
            	
                
                var param = {
                		id: self.id,
                        status:self.status
                      };
                Dao.getWorkApplyDetail(param, function (data,total) {
                    if (data){
                    	var typeName = data.typeName;
                    	var workDesc = data.workDesc;
                    	var orgName = data.orgName;
                    	var relateTaskDetailList = data.relateTaskDetail;//相关任务集合
                    	var approvalDetailList = data.approvalDetail;//审批详情
                    	var approvalCreateAccountName = data.createAccountName;
                    	var workCreateAccount  = data.createAccount;
                    	var approvalAccounts = data.approvalAccounts;//审批人账号
                    	var approvalCreateTime= data.createTime;
                    	var areaNames = data.areaName;//作业区域
                    	var usersArr = data.workAccount;//任务责任人名称
                    	var taskDetailStep=data.step;
                    	//var workDetailStatus= data.status;
       	                if(approvalCreateTime){
       	                	approvalCreateTime =moment(approvalCreateTime).format('YYYY/MM/DD HH:mm');
       	                }
                    	var beginTime = data.beginTime;
       	                if(beginTime){
       	               		 beginTime =moment(beginTime).format('YYYY/MM/DD HH:mm');
       	                }
       	             	var endTime = data.endTime;
    	                if(endTime){
    	                	endTime =moment(endTime).format('YYYY/MM/DD HH:mm');
    	                }
    	                
    	                var loginAccountName = userInfor.accountName
    	                //任务申请人是创建人    data.status  状态  1：审批中 2：审批通过 3：审批不通过 4：已撤回
    	                if(workCreateAccount==loginAccountName && taskDetailStep!=0 && data.status!=3 && data.status!=4){
    	                	$("#workApply_gengduo_"+self.getNewId).show();
    	                	$("#workApply_fuzhi_"+self.getNewId).hide();
    	                }else{
    	                	$("#workApply_fuzhi_"+self.getNewId).show();
    	                	$("#workApply_gengduo_"+self.getNewId).hide();
    	                }

                    	$("#workTypeName_"+self.getNewId).html(typeName);
                    	$("#workName_"+self.getNewId).html(workDesc);
                    	$("#workApplyOrgName_"+self.getNewId).html(orgName);
                    	$("#work_beginTime_"+self.getNewId).html(beginTime);
                    	$("#work_endTime_"+self.getNewId).html(endTime);
                    	if(areaNames){
                    		for(var i=0;i<areaNames.length;i++){
                    			 if(areaNames[i]!=""){
	                    			 $("#residualTask_"+self.getNewId).append(`
	                    					 <div id="waitAreaItem" class="waitAreaItem">
	                    		            	<div class="workAreaNum">`+(i+1)+`</div><span class="iteml">`+areaNames[i]+`</span>
	                    		            </div> 
	                    			 `);
                    			 }
                    			
                    		}
                    	}
                    	
                    	if(relateTaskDetailList){
                    		for(var i=0;i<relateTaskDetailList.length;i++){
                   			 if(relateTaskDetailList[i]!=""){
                   				    var taskDetail = relateTaskDetailList[i];
	                   				var startTime = taskDetail.startTime;
	                   				var relateTaskId = taskDetail.id;
	                   				var status = taskDetail.status;//任务状态 1：未开始 2：进行中 3：已结束
	                   				var maintainType = taskDetail.maintainType;//维保类型 1 维保巡查任务 2保养任务 3测试任务 4联动测试任务
	               	                if(startTime){
	               	                	startTime =moment(startTime).format('YYYY/MM/DD HH:mm');
	               	                }
	               	             	var endTime = taskDetail.endTime;
	               	                if(endTime){
	               	                	endTime =moment(endTime).format('YYYY/MM/DD HH:mm');
	               	                }
	               	                if(status==1){
	               	                	status = "未开始";
	               	                }else if(status==2){
	               	                	status = "进行中";
	               	                }else if(status==3){
	               	                	status = "已结束";
	               	                }
	               	                var taskDetailUrl = "";//任务详情地址
	               	                if(maintainType==1){
	               	                	taskDetailUrl="/maintainInspectDetail/"+relateTaskId+"/0/";
	               	                }else if(maintainType==2){
	               	                	taskDetailUrl="/maintainDetail/"+relateTaskId+"/0/";
	               	                }else if(maintainType==3){
	               	                	taskDetailUrl="/singleTestDetail/"+relateTaskId+"/0/";
	               	                }else if(maintainType==4){
	               	                	taskDetailUrl="/linkTestDetail/"+relateTaskId+"/";
	               	                }
	               	                $("#relationTaskPlan_"+self.getNewId).show();
	                    			 $("#tastList_"+self.getNewId).append(`
	                    					 <li>
	                    		        		<a href="`+taskDetailUrl+`" class="item-link item-content" data-view=".view-main">
	                    		        			<div class="item-inner" style="padding: 0;padding-top: 5px;">
	                    		                          <div class="taskStatus">`+status+`</div>
	                    		                          <div class="item-title-row">`+taskDetail.name+`</div>
	                    		                          <div class="item-subtitle">
	                    		                          	<div class="float-left OperationCycleTitle">作业周期 </div>
	                    		                          	<div class="float-left OperationCycle">`+startTime+` ~ `+endTime+`</div>
	                    		                          </div>
	                    	                      	</div>
	                    		        		</a>
	                    		        	</li>
	                    			 `);
                   			 }
                   			
                   			}
                    	}
                    	
                   		if(usersArr){
       	                	for (var key in usersArr) {
   	                   			 if(usersArr[key]!=""){
   	                   				var ownerHeadUrl = picPeopleNo(usersArr[key].headUrl);
   	                   				 $("#ownerUser_"+self.getNewId).append(`
   	                    					 <div class="heard">
   	                                         	<img src='`+ownerHeadUrl+`'/>
   			                                    <div class="userName">`+usersArr[key].name+`</div>
   			                            	</div>
   	                    			 `);
   	                   			 }
                      			}
                       	}
                   		
                   		var createAccountHeadUrl = picPeopleNo(data.createAccountHeadUrl);
                    	 //审批详情 发起的申请的第一个步骤
                    	 $("#timeLineList_"+self.getNewId).append(`
           					  <div class="timeline-item">
            					    <div class="timeline-item-divider timeline-item-green"></div>
            					    <div class="timeline-item-content" style="width: 100%;">
            					    	<div class="timeline-item-title process-title">【`+approvalCreateAccountName+`】发起申请</div>
            					    	<div class="timeline-item-inner padding-5" style="background: #f1f1f1b8">
           					      		<div>
           					        		<div style="width: 120px;height:40px;margin-top: 5px;">
           		                                 <img src="`+createAccountHeadUrl+`" class="applyImg"/>
           		                                 <div class="userName" style="margin-left: 5px;padding-top: 10px;line-height:15px;">`+approvalCreateAccountName+`</div>
           	                   				</div>
           	                   				<div class="applyTime">`+approvalCreateTime+`</div>
           					        	</div>
           					      </div>
            					    </div>
           					  </div>`);
                    	
                    	//审批详情其它步骤
                    	if(approvalDetailList){
                    		for(var i=0;i<approvalDetailList.length;i++){
                   			 if(approvalDetailList[i]!=""){
                   				    var approvalDetai = approvalDetailList[i];
                   				 	var result = approvalDetai.result;//审批结果 -- 0：审批不通过 1：审批通过
                   					var approvalAccountName = approvalDetai.approvalAccountName;//审批人姓名
                   					var approvalDesc = approvalDetai.approvalDesc;//审批描述
                   					var workApplyId = approvalDetai.workApplyId;
                   					var approvalTime = approvalDetai.approvalTime;//审批时间
                   					var createAccount = approvalDetai.createAccount;//创建人账号
                   					var approvalAccount = approvalDetai.approvalAccount;//审批人账号
	                   				var createTime = approvalDetai.createTime;
	                   				var steps = approvalDetai.steps;//当前审批流（0表示审批结束）
	                   				var approvalAccountHeadUrl = picPeopleNo(approvalDetai.approvalAccountHeadUrl);//审批人头像
		           	                
	                   				//显示审批按钮[当前账号是审批人 并且 当前审批还未结束 并且不是撤回,并且是审批中]
	             	                if(approvalAccounts!=null && taskDetailStep==steps && loginAccountName==approvalAccount && taskDetailStep!=0 && data.status==1){
	             	                	$("#work_applybtn_"+self.getNewId).show();
	             	                }
	                   				
	                   				if(createTime){
		           	                	 createTime =moment(createTime).format('YYYY/MM/DD HH:mm');
		           	                }
			               	        if(approvalTime){
			               	             approvalTime =moment(approvalTime).format('YYYY/MM/DD HH:mm');
			               	        }
	                   				
	                   				if(data.status==4 && steps>=taskDetailStep){
	                   					break;
	                   				}
	                   				
	                   				//审批过了不能在审批
	                   				if(approvalAccount==userInfor.accountName && result!=null){
	                   					$("#work_applybtn_"+self.getNewId).hide();
	                   				}
	 								          var timelineItemCss = "timeline-item-gray";
									          var statusSteps = "等待【"+approvalAccountName+"】审批";
	               	                if(result==0){
	               	                	statusSteps = "【"+approvalAccountName+"】审批不通过";
	               	                }else if(result==1){
	               	                	statusSteps = "【"+approvalAccountName+"】审批通过";
	               	                }
	               	                if(steps==0){
	               	                	statusSteps = "【"+approvalAccountName+"】审批结束";
	               	                }
	               	             	if(steps==taskDetailStep){
	               	                	statusSteps = "【"+approvalAccountName+"】审批中";
	               	                }
	               	             	if(statusSteps.indexOf("不通过")!=-1){
	               	             		timelineItemCss = "timeline-item-orange";
	               	             	}else if(statusSteps.indexOf("通过")!=-1 || statusSteps.indexOf("撤回")!=-1|| statusSteps.indexOf("审批结束")!=-1){
	               	             		timelineItemCss = "timeline-item-green";
	               	             	}else if(statusSteps.indexOf("审批中")!=-1){
	               	             		timelineItemCss = "timeline-item-blue";
	               	             	}
	               	             	
	               	           		//审批完毕
	                    			if(steps<taskDetailStep || taskDetailStep==0){
	                    				$("#timeLineList_"+self.getNewId).append(`
	        					  			<div class="timeline-item">
                    					    <div class="timeline-item-divider `+timelineItemCss+`"></div>
                    					    <div class="timeline-item-content" style="width: 100%;">
                    					      <div class="timeline-item-title process-title">`+statusSteps+`</div>
                    					      <div class="timeline-item-inner padding-5" style="background: #f1f1f1b8">
                    					      		<div>
                    					          		<div class="workApplyName">`+approvalDesc+`</div>
                    					        		<div style="width: 155px;min-height: 40px;margin-top: 5px;">
                    		                                 <img src='`+approvalAccountHeadUrl+`'  class="applyImg"/>
                    		                                 <div class="userName" style="margin-left: 5px;padding-top: 10px;">`+approvalAccountName+`</div>
                    	                   				</div>
                    	                   				<div class="applyTime">`+approvalTime+`</div>
                    					        	</div>
                    					      </div>
                    					    </div>
            					  		</div>`);
	                    			}else if(steps==taskDetailStep){
	                    				//审批中
	                    				self.approvalDetaiId = approvalDetai.id;
	                    				$("#timeLineList_"+self.getNewId).append(`
		                    				<div class="timeline-item">
	                					    	<div class="timeline-item-divider `+timelineItemCss+`"></div>
		                					    <div class="timeline-item-content" style="width: 100%;">
		                					      <div class="timeline-item-title process-title">`+statusSteps+`</div>
		                					    </div>
	        					  			</div> `);
	                    			}else if(steps>taskDetailStep){
	                    				//等待某某审批
	                    				$("#timeLineList_"+self.getNewId).append(`
	                    						<div class="timeline-item">
	                					    	<div class="timeline-item-divider `+timelineItemCss+`"></div>
		                					    <div class="timeline-item-content" style="width: 100%;">
		                					      <div class="timeline-item-title process-title processWait">`+statusSteps+`</div>
		                					    </div>
	        					  			</div>`);
	                    			}
	               	           		//审批不通过;后面的审批流程不显示
	                    			if(result==0){
	               	                	break;
	               	                }
	                    			 
                   			 }
                   			
                   			}
                    	}
                    	if(data.status==4){//撤回
                    			//审批详情 发起的申请的第一个步骤
                    			var updateTime = data.updateTime;
                    			if(updateTime){
                    				updateTime =moment(updateTime).format('YYYY/MM/DD HH:mm');
            	                }
                       	 		$("#timeLineList_"+self.getNewId).append(`
              					  <div class="timeline-item">
               					    <div class="timeline-item-divider timeline-item-green"></div>
               					    <div class="timeline-item-content" style="width: 100%;">
               					    	<div class="timeline-item-title process-title">【`+approvalCreateAccountName+`】撤回</div>
               					    	<div class="timeline-item-inner padding-5" style="background: #f1f1f1b8">
              					      		<div>
              					        		<div style="width: 120px;height:40px;margin-top: 5px;">
              		                                 <img src="`+createAccountHeadUrl+`" class="applyImg"/>
              		                                 <div class="userName" style="margin-left: 5px;padding-top: 10px;">`+approvalCreateAccountName+`</div>
              	                   				</div>
              	                   				<div class="applyTime">`+updateTime+`</div>
              					        	</div>
              					      </div>
               					    </div>
              					  </div>`);
                    	}
                    	
                    }
                });
           },
           //提交作业审批
           submitWorkApply:function(){
        	   var self=this;
        	   app.router.navigate("/approveApply/"+self.approvalDetaiId+"/");
           },
           //撤回作业申请
           returnTask:function(){
       		var self=this;
      		  cancelTask(function(){
  				Dao.withdrawWorkApply({
  					id:self.id,
  					account : userInfor.accountName,
                  },function(data) {
                  	    app.methods.showToastCenter('撤回成功');
             	 		app.router.back();
             	 		//回调刷新列表
             	 		app.view.current.el.f7View.router.currentPageEl.f7Component.backRefreshWorkApply();
                  });
      		   });
       		},
            copyWorkApply:function(){
            	var self = this;
            	app.router.navigate("/workApplyCreate/"+self.id+"/0/");
            },
          	//创建作业申请回调刷新列表
            backRefreshWorkApply:function(){
            	var self = this;
                self.getWorkApplyDetail();
            },
        },
        on: {
        	pageInit: function (e, page) {
                var self = this;
                self.getWorkApplyDetail();
    		},
        }
      }
</script>